{% extends 'base/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}密码重置成功 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .password-page {
        background-image: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }
    
    .password-card {
        border: none;
        box-shadow: 0 5px 15px rgba(163, 112, 247, 0.1);
        transition: all 0.3s ease;
    }
    
    .password-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(163, 112, 247, 0.15);
    }
    
    .password-header {
        background: linear-gradient(135deg, #a370f7 0%, #ff9fc6 100%);
        color: white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 15px 20px;
    }
    
    .password-header h5 {
        margin: 0;
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .success-icon {
        font-size: 5rem;
        color: #2ecc71;
        margin-bottom: 20px;
        animation: pulse-success 2s infinite;
    }
    
    @keyframes pulse-success {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.05);
            opacity: 0.9;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #a370f7, #ff9fc6);
        border: none;
        box-shadow: 0 4px 10px rgba(163, 112, 247, 0.3);
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #995de7, #ff8ab9);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(163, 112, 247, 0.4);
    }
    
    .success-message {
        background-color: rgba(46, 204, 113, 0.1);
        border-left: 4px solid #2ecc71;
        padding: 15px;
        border-radius: 8px;
        margin: 20px 0;
        text-align: left;
    }
    
    .success-message h6 {
        color: #2ecc71;
        font-weight: 600;
    }
</style>
{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="password-page">
                    <div class="card password-card">
                        <div class="card-header password-header">
                            <h5 class="mb-0"><i class="fas fa-check-circle me-2"></i>{% trans "密码重置成功" %}</h5>
                        </div>
                        <div class="card-body p-4 text-center">
                            <i class="fas fa-check-circle success-icon"></i>
                            <h3 class="mb-3 fw-bold">{% trans "您的密码已成功重置！" %}</h3>
                            <p class="mb-4">{% trans "您已经成功更改了账户密码，现在可以使用新密码登录您的账户。" %}</p>
                            
                            <div class="success-message">
                                <h6><i class="fas fa-shield-alt me-2"></i>{% trans "安全提示" %}</h6>
                                <p>{% trans "为了保障您的账户安全，我们建议：" %}</p>
                                <ul class="text-muted ps-4">
                                    <li>{% trans "定期更换密码" %}</li>
                                    <li>{% trans "不要在公共设备上保存密码" %}</li>
                                    <li>{% trans "不要将您的密码告诉他人" %}</li>
                                </ul>
                            </div>
                            
                            <div class="d-grid gap-2 mt-4">
                                <a href="{% url 'account_login' %}" class="btn btn-primary">
                                    <i class="fas fa-sign-in-alt me-2"></i>{% trans "立即登录" %}
                                </a>
                                <a href="/" class="btn btn-outline-secondary">
                                    <i class="fas fa-home me-2"></i>{% trans "返回首页" %}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %} 